@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.cdnfonts.com/css/pricedown");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Yantramanav:wght@100;300;400;500;700;900&display=swap");

/* Menu */
div#openmenu {
    display: none;
    position: absolute;
    width: 50%;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.brand-logo {
    width: 25%;
} /* when using an svg all you need to change is the width and it will resize it */

/* Menu tab & panel styles */
.text-tabcolor {
    color: rgb(255, 255, 255) !important;
}
.bg-active-tab {
    background: rgb(23 23 23) !important;
}
.bg-panel {
    background: rgb(30 30 30) !important;
}
.q-tab-panels {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
} /* change all 12px for a different border radius (rounds edges of the menu) */
.q-splitter__panel.q-splitter__before {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
} /* change all 12px for a different border radius (rounds edges of the menu) */
.q-tabs--vertical.q-tabs--not-scrollable .q-tabs__content {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
} /* change all 12px for a different border radius (rounds edges of the menu) */

/* Menu text styles */
.text-h6 {
    color: rgb(255, 255, 255) !important;
}
.text-h7 {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Menu buttons & checkboxes & toggle switch icons styles */
.text-textbutton {
    color: rgb(0, 0, 0) !important;
}
.bg-bgbutton {
    background: rgb(220 20 60) !important;
}
.q-checkbox__inner {
    color: rgb(255 255 255 / 70%) !important;
}
.text-checkbox {
    color: rgb(220 20 60) !important;
}
.q-checkbox__svg {
    color: rgb(0, 0, 0) !important;
}
.q-checkbox__inner--truthy .q-checkbox__bg {
    box-shadow: 0px 0px 3px 3px rgb(220 20 60 / 15%) !important;
} /* if you want the checkboxes to have a glow/shadow */
.text-toggleicons {
    color: rgb(0, 0, 0) !important;
}

/* Menu misc */
hr {
    opacity: 0.1 !important;
} /* horizontal line that seperates sections */
.q-mb-md {
    margin-bottom: 0px !important;
} /* removes extra top padding */
.q-mb-md-d {
    padding-left: 10px !important;
    padding-bottom: 10px !important;
} /* keeps q-items aligned */
.q-item {
    padding: 8px 0px !important;
} /* keeps q-items aligned */
.q-item__section--avatar {
    min-width: 40px !important;
} /* keeps q-items aligned */
.q-item__section--side {
    padding-right: 0px !important;
} /* keeps q-items aligned */
.q-splitter--vertical > .q-splitter__separator {
    width: 0px !important;
} /* keeps navigation tab panel seamless */
div#q-loading-bar {
    display: none !important;
} /* makes sure there's no ajax load from quasar */
::-webkit-scrollbar {
    display: none !important;
} /* makes sure there's no ugly scrollbar on menu*/

/* Hud radial styles */
.text-health {
    color: rgb(33, 171, 97) !important;
}
.text-stress {
    color: rgb(255, 0, 0) !important;
}
.text-nos {
    color: rgb(255, 72, 133) !important;
}
.text-cruise {
    color: rgb(255, 72, 133) !important;
}
.text-armed {
    color: rgb(255, 72, 133) !important;
}
.text-harness {
    color: rgb(182, 72, 255) !important;
}
.text-oxygen {
    color: rgb(138, 168, 189) !important;
}
.text-parachute {
    color: rgb(0, 0, 0) !important;
}
.text-dev {
    color: rgb(0, 0, 0) !important;
}
.text-gauge {
    color: rgb(255, 255, 255) !important;
}

#main-container {
    width: 100%;
    height: auto;
}

/* Money */
#money-container {
    position: absolute;
    right: 2vw;
    top: 5vh;
    font-weight: 400;
    font-size: 40px;
}

#sign,
#bank {
    font-family: "Pricedown Bl", sans-serif;
    text-align: right;
    color: #00ac31;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7);
}

#plus {
    font-size: 50px;
    font-family: "Pricedown Bl", sans-serif;
    text-align: right;
    color: #00ac31;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7);
}

#minus {
    font-size: 50px;
    font-family: "Pricedown Bl", sans-serif;
    text-align: right;
    color: #ac0000;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7);
}

#money {
    font-family: "Pricedown Bl", sans-serif;
    text-align: right;
    color: #ffffff;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7);
}

/* Player HUD */

#playerhud {
    position: absolute;
    display: flex;
    left: 3vh;
    bottom: 0.2vw;
}

.q-ml-xl {
    margin-left: -22px !important; /* Change this to space radials */
}

/* Vehicle HUD */

speed:after {
    content: "MPH"; /* If using KPH change this content from MPH */
    display: block;
    padding-top: 3px;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 8px;
    font-weight: 900;
}

altitude:after {
    content: "ALT";
    display: block;
    padding-top: 10px;
    padding-left: 2px;
    padding-right: 2px;
    font-weight: 900;
}

speed {
    transform: rotate(150deg);
    font-size: 2.4vh;
    position: fixed;
    color: #fff;
    text-align: center;
    font-weight: 600;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7);
}

altitude {
    transform: rotate(135deg);
    font-size: 2.4vh;
    position: fixed;
    color: #fff;
    text-align: center;
    font-weight: 600;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7);
}

.border {
    bottom: 7.9%;
    left: 1.3%;
    width: 0%;
    text-align: center;
}

.square {
    bottom: 6.3%;
    width: 29vh;
    height: 18.5vh;
    border: 4px solid #bababa;
    position: absolute;
    display: inline-block;
}

.circle {
    bottom: 6.9%;
    width: 27vh;
    height: 22.9vh;
    border: 4px solid #bababa;
    position: absolute;
    display: inline-block;
    border-radius: 50%;
}

/* Animation */
.slide-fade-enter-active {
    transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 2s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* Compass */
.baseplate {
    position: relative;
    margin: 0 auto;
    top: -0.8vh;
    width: 150px;
    height: auto;
}

.street-container {
    position: relative;
    top: 0.5vh;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4vh;
    letter-spacing: 0.7px;
    text-decoration: none;
    font-style: normal;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 800;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6);
}

.street1 {
    position: absolute;
    margin: 0 auto;
    right: 55%;
    text-align: right !important;
    color: rgb(255, 255, 255);
}

.street2 {
    position: absolute;
    margin: 0 auto;
    left: 55%;
    text-align: left !important;
    color: rgb(255, 255, 255);
}

.pointer {
    position: absolute;
    margin: 0 auto;
    top: -2%;
    left: 0;
    right: 0;
    font-family: "Yantramanav", sans-serif;
    color: rgb(255, 255, 255);
    font-size: 2.2vh;
    text-align: center;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6);
    z-index: 9999;
}

.degrees {
    position: absolute;
    margin: 0 auto;
    top: 80%;
    left: 0;
    right: 0;
    opacity: 0.8;
    font-family: "Yantramanav", sans-serif;
    color: rgb(255, 255, 255);
    font-size: 1.5vh;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 0 1px rgb(0 0 0 / 60%), 0 0 1px rgb(0 0 0 / 60%), 0 0 1px rgb(0 0 0 / 60%), 0 0 1px rgb(0 0 0 / 60%);
}

.bezel {
    position: relative;
    width: 100%;
    height: 2vh;
    font-family: "Yantramanav", sans-serif;
    font-size: 0.35vh;
    font-weight: 700;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6);
}

.bearing {
    position: relative;
    width: 100%;
    top: -0.5vh;
    height: 3.5vh;
    padding-left: 0.12vw;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.3vh;
    letter-spacing: 0.7px;
    text-decoration: none;
    font-style: normal;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 600;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.6);
}